---
title: Accessibility
redirect_from:
  - /components/tabs/accessibility/
---

# Accessibility

## Tabs

The Tabs component has been designed with accessibility in mind.

### Accessibility props

The following props are available to improve the accessibility of your Tabs component:

#### TabList

| Prop           | Type     | Description                                                    |
| :------------- | :------- | :------------------------------------------------------------- |
| ariaLabel      | `string` | Allows you to provide an accessible label for the set of tabs. |
| ariaLabelledby | `string` | References the ID of an element that labels the set of tabs.   |

The `ariaLabel` prop should ideally be translated and descriptive of the purpose of the tab set. It should clearly communicate the type of content users will find within the tabs.

The `ariaLabelledby` prop is used when you already have a visible heading that describes the tab set, allowing you to reuse that text for screen readers.

#### Tab

| Prop     | Type      | Description                                                        |
| :------- | :-------- | :----------------------------------------------------------------- |
| disabled | `boolean` | Indicates that the tab is not interactive and cannot be activated. |

### Accessibility implementation

The Tabs component automatically implements proper accessibility features including:

- Correct ARIA roles: `tablist` for the TabList, `tab` for individual tabs, and `tabpanel` for tab panels
- Appropriate ARIA states and relationships:
- `aria-selected`: Indicates which tab is currently active
- `aria-disabled`: Applied to tabs that cannot be activated
- `aria-controls`: Applied to each tab to reference its associated panel
- `aria-labelledby`: Applied to each panel to reference its associated tab (this is different from the `ariaLabelledby` prop on TabList)

### Keyboard navigation

The Tabs component supports keyboard navigation for accessibility:

- **Tab**: Moves focus to the active tab panel
- **Arrow Right**: Moves focus to the next tab in the list. When focus is on the last tab, it wraps to the first tab
- **Arrow Left**: Moves focus to the previous tab in the list. When focus is on the first tab, it wraps to the last tab
- **Home**: Moves focus to the first tab in the list
- **End**: Moves focus to the last tab in the list

All keyboard interactions consider the presence of disabled tabs, automatically skipping them when navigating.

### Best practices

- Use the `ariaLabel` or `ariaLabelledby` props on the `TabList` component to provide a descriptive label for the set of tabs, especially when there are multiple tab sets on a page.
- Ensure that tab labels are clear and descriptive of the content they control.
- When a tab is disabled, use the `disabled` prop to properly communicate this state to assistive technologies.
- Always translate accessibility-related strings to match the user's language.

### Code examples

#### Using ariaLabel

```jsx
<Tabs>
  <TabList ariaLabel="Content sections">
    <Tab>Section 1</Tab>
    <Tab>Section 2</Tab>
    <Tab disabled>Section 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Content for section 1</TabPanel>
    <TabPanel>Content for section 2</TabPanel>
    <TabPanel>Content for section 3</TabPanel>
  </TabPanels>
</Tabs>
```

In this example, screen readers would announce "Content sections, tab group" when focusing on the tab list.

#### Using ariaLabelledby

```jsx
<div>
  <h2 id="tabs-title">Flight Options</h2>
  <Tabs>
    <TabList ariaLabelledby="tabs-title">
      <Tab>Economy</Tab>
      <Tab>Business</Tab>
      <Tab>First Class</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>Economy class options</TabPanel>
      <TabPanel>Business class options</TabPanel>
      <TabPanel>First class options</TabPanel>
    </TabPanels>
  </Tabs>
</div>
```

In this example, screen readers would announce "Flight Options, tab group" when focusing on the tab list.
